<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" :checked="isAll" @change="handleToggle" />
            </th>
            <th>名称</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in fruits" :key="item.id">
            <td>
              <!-- <input type="checkbox" :value="item.id" v-model="checkedIds" /> -->

              <!-- 为了监控到 checkedIds 数据的变化，可以使用 watch ，但这里还没有学习到 watch，就可以展开 v-model来实现
              -->
              <input
                type="checkbox"
                :value="item.id"
                :checked="checkedIds.includes(item.id)"
                @change="handleChange"
              />
            </td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          fruits: [
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
          ],
          checkedIds: [1], // 表示当前勾选的水果的Id
          isAll: false, // 表示当前是否全选了
        },
        methods: {
          // event - 事件对象
          handleToggle(event) {
            // console.log("handleToggle", event);
            // 获取当前是勾选，还是取消勾选
            const checked = event.target.checked;
            console.log("checked", checked);

            if (checked) {
              // 如果 checked 为 true, 则要全选所有水果
              // 将 fruits 数组中每一项的 id 映射到 checkedIds 身上。  map
              this.checkedIds = this.fruits.map((item) => item.id);
            } else {
              // 取消全选，将 checkedIds 赋值为空数组即可。
              this.checkedIds = [];
            }
          },

          handleChange(event) {
            // 获取当前元素上绑定的 value 值
            // 判断 value 值 是否在 checkedIds 中，如果在，则移除，否则添加
            const id = +event.target.value;
            console.log("id", id);

            if (this.checkedIds.includes(id)) {
              // 在，则移除  splice   filter
              this.checkedIds = this.checkedIds.filter((item) => item !== id);
            } else {
              // 不在，则添加进去
              this.checkedIds.push(id);
            }

            // 判断是否要全选
            this.isAll = this.checkedIds.length === this.fruits.length;
          },
        },
      });
    </script>
  </body>
</html>
